<template>
  <div class="app-container">
    <div class="mainbox">
      <div class="filter-container">
        <el-form ref="filterFormRef" :inline="true" :model="filterForm">
          <el-form-item label="禁言日期">
            <el-date-picker
              v-model="filterForm.gagDateTime"
              type="date"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="禁言日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="被禁言人" prop="userName">
            <el-input v-model.trim="filterForm.userName" placeholder="请输入被禁言人"></el-input>
          </el-form-item>
        </el-form>
        <div class="flex-1"></div>
        <el-button type="primary" @click="handleFilter">搜索</el-button>
        <el-button @click="handleReset">重置</el-button>
      </div>
      <dt-table
        ref="dtTable"
        class="account-table"
        v-loading="loading"
        :table-opts="tableOpts"
        row-key="id"
        :pagination-data="{
          total: total,
          queryParams: filterForm
        }"
        @pagination="getList"
      >
      </dt-table>
    </div>
     <reviewModel ref="reviewModelRef" @success="getList" />
  </div>
</template>
<script>
import { getAuditPage, deleteGag } from '@/api/classroom/forbiddenListReview'
import { cloud } from '@/framework/utils/request'

export default {
  name: 'forbiddenListReview',
  // components: { myDtDetail },
  dicts: ['auditStatus'],
  data() {
    return {
      total: 0,
      filterForm: {
        pageNo: 1,
        pageSize: 10,
        userName: '',
        gagDateTime: '' // 初始化日期
      },
      // detailOption:[],
      tableOpts: {
        rowKey: 'id',
        tableData: [],
        firstTableCol: {
          select: false
        },
        indexTableCol: {
          index: true
        },
        toolbarBtn: [],
        tableCol: [
          {
            prop: 'userName',
            label: '被禁言人',
            show: true
          },
          {
            prop: 'createTime',
            label: '禁言日期',
            show: true
          }
        ],
        operator: {
          width: 200,
          operatorBtn: [
            {
              text: '解禁',
              size: 'small',
              type: 'text',
              click: (row, col, cellValue) => { return this.viewInfo(row) }
            }
          ]
        }
      },
      loading: false,
      typeList: []
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    refresh() {
      this.getList()
    },
    toExamine(row) {
      this.$refs.reviewModelRef.open(row)
    },
    // 搜索
    handleFilter() {
      this.filterForm.pageNo = 1
      this.getList()
    },
    // 重置
    handleReset() {
      this.filterForm.gagDateTime = ''; // 将日期框内容重置为空
      this.$refs.filterFormRef.resetFields('filterForm')
      this.handleFilter()
    },
    //解禁
    viewInfo(row) {
      let message = `确定要解禁吗?`
      this.$dtMessageBox({ title: '提示', message, type: 'warning' }).then(() => {
        deleteGag(row.id).then((res) => {
          const type = res.success ? 'success' : 'error'
          // 提示消息
          this.$dtMessage({
            type,
            message: '解禁成功'
          })
          if (res.success) {
            this.getList()
          }
        })
      })
    },
    getList() {
      this.loading = true
      getAuditPage(this.filterForm).then((res) => {
        this.tableOpts.tableData = res.data.rows
        this.total = res.data.totalRows
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.img-box {
  display: inline-block;
  position: relative;
  width: 160px;
  height: 90px;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  box-sizing: border-box;
  i {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-45%, -50%);
    color: #fff;
    font-size: 28px;
  }
}
</style>
